<template>
  <CustomNav title="一键登录"></CustomNav>
  <view class="">
    <view class="content">
      <view class="logo">
        <view class="img">
          <image src="/static/logo.png" mode=""></image>
        </view>
        <view class="title"> 拾光锦汉服体验 </view>
      </view>
      <view class="btn_box_wx">
        <!-- 在这里添加遮罩层的原因：由于点击button会立刻触发open-type调用，无法在点击前做出相应的逻辑判断 -->
        <!-- 当isAgree（同意协议）遮罩层隐藏 -->
        <view class="mask" @click="handleLogin" v-if="!isAgree"></view>
        <button
          class="btn wx"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          手机号快捷登录
        </button>
        <!-- <button open-type="contact" @contact="handleContact">客服</button> -->
        <!-- <view class="btn white">
          取消授权
        </view> -->
      </view>
    </view>
  </view>

  <view class="agree_container">
    <view class="animation-container" :class="isAnmation ? 'animation' : ''">
      <label for="radio" class="foot">
        <checkbox-group class="agree" @change="handleAgree">
          <checkbox :checked="isAgree" id="radio" />
        </checkbox-group>
      </label>
      <view class="right">
        <text style="margin-left: 5rpx" @click="isAgree = !isAgree"
          >我已阅读并同意</text
        >
        <text class="text" @click="userAgreement">《用户协议》</text> 和
        <text @click="privacyAgreement" class="privacyAgreement"
          >《隐私协议》</text
        >
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// import { wxLogin } from "@/api/login";
import { getItem, setItem } from "@/utils/localStorage";
import { Alert, unAlert } from "@/utils/tool";
import useWxUserStore from "@/store/modules/user";
import CustomNav from "@/components/CustomNav/index.vue";
import { wxLogin } from "@/api/user";

const wxUserStore = useWxUserStore();

const code = ref("");
const isAgree = ref(false); // wx是否同意协议
const isAnmation = ref(false); // 是否播放动画

// 校区
const campus = ref("");
let itemList = ["新校区", "旧校区"]; // 旧校区0    新校区1
// 只显示当前校区的订单
const handleLogin = () => {
  // 先获取当前学生是否选择了校区
  // const isSelectCampus = getItem("campus")

  // 用户还未选择校区
  // if (!isSelectCampus) {
  //   uni.showModal({
  //     title: '请选择您的校区',
  //     content: '提示：确认校区后不可修改!',
  //     success: function (res) {
  //       if (res.confirm) {
  //         console.log('用户点击确定');

  //         uni.showActionSheet({
  //             itemList,
  //             success: function (res) {

  //               campus.value = itemList[res.tapIndex]

  //               // 将校区存储到本地（用于获取订单数据）
  //               setItem("campus", )
  //             },
  //             fail: function (res) {
  //               console.log(res.errMsg);
  //             }
  //           });

  //       } else if (res.cancel) {
  //         console.log('用户点击取消');
  //       }
  //     }
  //   });
  // } else {
  //   // 播放动画
  //   isAnmation.value = true
  //   setTimeout(() => {
  //     // 清除动画（下次可继续播放）
  //     isAnmation.value = false
  //   }, 500)
  //   if (!isAgree.value) { // 未同意协议
  //     Alert("请同意用户协议与隐私政策", 'none', 1000)
  //   }
  // }

  // 播放动画
  isAnmation.value = true;
  setTimeout(() => {
    // 清除动画（下次可继续播放）
    isAnmation.value = false;
  }, 500);
  if (!isAgree.value) {
    // 未同意协议
    Alert("请同意用户协议与隐私政策", "none", 1000);
  }
};

const handleAgree = (e) => {
  // 是否同意协议（wx小程序）
  isAgree.value = !isAgree.value;
};

// ****************************微信手机号登录**************************************
// 获取手机号
const getPhoneNumber = async (e) => {
  // 1. 拿到code
  const code = e.detail.code;

  console.log("code:", e);

  const openIdCode = await wx.login();

  console.log("openIdCode:", openIdCode);

  // 保证用户点击了允许
  if (e.detail.encryptedData || e.detail.iv) {
    // try 代表请求发送成功了，但里面想要的结果错不错就不知道了
    try {
      Alert("登录中...", "loading", 0, true);
      // 将code传给后端，后端拿这个code能达到openid（注：小程序中获取手机号时返回的 code 和 wx.login API 返回的 code 不一样）
      const openIdCode = await wx.login();

      console.log("openIdCode:", openIdCode);

      // 2. 发请求，将code传给后端
      const res = await wxLogin({
        code: code,
        openIdCode: openIdCode.code,
      });

      console.log("res.data.code:", res.data.code);

      if (res.data.code == 200) {
        wxUserStore.updateUserInfo(res.data.data);
      } else {
        Alert("登录失败", "error", 1000);
      }
    } catch {
      // 表示后端服务器有问题（比如服务器挂了）
      Alert("服务异常", "error", 1000);
    }

    // 3. 结果
  } else {
    // Alert('登录失败')
  }
};

// 用户协议
const userAgreement = () => {
  uni.navigateTo({
    url: "/pagesD/userAgreement/index",
  });
};
// 隐私协议
const privacyAgreement = () => {
  uni.navigateTo({
    url: "/pagesD/privacyAgreement/index",
  });
};
</script>

<style lang="scss">
// wx
.logo {
  margin-top: 300rpx;

  .img {
    margin: 0 auto;
    width: 150rpx;
    height: 150rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    text-align: center;
    margin-top: 20rpx;
  }
}

.btn_box_wx {
  width: 580rpx;
  margin: 0 auto;
  margin-top: 100rpx;
  position: relative;

  .mask {
    width: 750rpx;
    height: 500rpx;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    // background-color: rgba(43, 78, 125, .3);
    top: -106rpx;
  }

  .btn {
    text-align: center;
    border-radius: 10rpx;
    line-height: 2.8;

    &:active {
      // background-color: #fabf4979;
      background-color: #af022d8a;
    }
  }

  .wx {
    color: #fff;
    // background-color: #60ca88;
    // background-color: #fac049;
    background-color: $btn;
  }

  .white {
    font-size: 24rpx;
    color: #555;
  }
}

.agree_container {
  width: 750rpx;
  position: fixed;
  bottom: 50rpx;
  left: 50%;
  transform: translateX(-50%);

  .animation-container {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    justify-content: center;

    &.animation {
      animation: agree 0.5s linear;
    }

    .foot {
      .agree {
        transform: scale(0.7) translate(12rpx, -1rpx);
      }
    }

    .right {
      .text {
        color: #4992ff;
        font-weight: 900;
      }

      .privacyAgreement {
        color: #4992ff;
        font-weight: 900;
      }
    }
  }
}

// 未同意协议动画
@keyframes agree {
  0% {
    transform: translateX(-5%);
  }

  20% {
    transform: translateX(5%);
  }

  40% {
    transform: translateX(-5%);
  }

  60% {
    transform: translateX(5%);
  }

  80% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(0%);
  }
}
</style>
